<template>
	<div>
		<div class="swiper Swiperp-swiper">
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="item in picture" :key="item.id">
					<img :src="item.url" />
				</li>
			</ul>
			 <div class="swiper-pagination Swiperp_pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
		</div>
				
				
	</div>
</template>

<script>

	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	export default{
		name:'Swiperp',
		props:['propssw'],
		data(){
			return{
				picture:[],
			}
		},
		watch:{
			propssw(){
				this.picture=this.propssw
			}
		},
		// 4设置应用swiper的位置以及具体操作
		updated(){
			new Swiper('.Swiperp-swiper',{
				// 循环播放
				loop : true,
				// 设置分页器效果
				pagination : {
					el:'.Swiperp_pagination'
				},
				// 设置播放项:时间、不停止、不暂停自动
				autoplay : {
					delay : 3000,
					stopOnLastSlide : false,
					disableOnInteraction : false,
				}
			})
		}
	}
</script>

<style scoped>
	/* 轮播区域的样式 */
	.Swiperp-swiper{
		width: 100%;
		height: 5.6rem;
		
	}
	.Swiperp-swiper img{
		width: 100%;
		height: 100%;
	}
	
	/* 穿透*/
	.Swiperp_pagination :deep(.swiper-pagination-bullet-active){
		background-color: pink;
	}
</style>
